<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input id="i" />
    <button onclick="testGlobal();">全局变量</button>
    <script>
        /*  element.addEventListener(event, function, useCapture) 
            可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

            可能值:
            true - 事件句柄在捕获阶段执行
            false- false- 默认。事件句柄在冒泡阶段执行
        */
        //捕获
        document.body.addEventListener("mousedown",()=>{
            console.log('body clicked');
        },true);
        document.getElementById("i").addEventListener("mousedown",()=>{
            console.log('i clicked');
        },true);
        
        //冒泡
        document.body.addEventListener("mousedown",()=>{
            console.log('body 冒泡');
        },false);
        document.getElementById("i").addEventListener("mousedown",()=>{
            console.log('i 冒泡');
        },false);

        function test(){
            message = '全局变量';
        }
        
        function testGlobal(){
            test();
            alert(message);
        }

    </script>
    

</body>

</html>